<template>
  <Card class="card-with-pager">
    <Spin fix v-if="loading.status">
      <Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>
      <div v-text="loading.text"></div>
    </Spin>
    <div slot="title">
      <Icon type="ios-people"></Icon>
      角色列表
      <div class="table-float">
        <Button type="primary" shape="circle" icon="plus" size="small" @click="add()"></Button>
      </div>
    </div>
    <Table border :columns="columns" :data="list" :no-data-text="''">
    </Table>
    <div class="card-pager">
      <Page :total="total" size="small" placement="top" :page-size="pageSize" :current="current" :page-size-opts="[5,10,15,20]" @on-page-size-change="pageSizeChange"
            @on-change="currentChange" show-total show-elevator show-sizer></Page>
    </div>
  </Card>
</template>

<script>
  import role from '@/models/car/role/index'

  export default {
    name: 'role-index',
    data () {
      return {
        loading: {
          status: false,
          text: ''
        },
        total: 0,
        pageSize: 15,
        current: 1,
        noDataText: '',
        columns: [
          {
            title: '角色名称',
            key: 'name',
            align: 'center'
          },
          {
            title: '状态',
            key: 'status',
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('span', params.row.status ? '✔️' : '❎')
              ])
            }
          },
          {
            title: '创建时间',
            key: 'create_at',
            align: 'center'
          },
          {
            title: '操作',
            key: 'action',
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.edit(params.row.id)
                    }
                  }
                }, '编辑')
              ])
            }
          }
        ],
        list: []
      }
    },
    mounted () {
      this.initLoading()
      this.load()
      this.getCount()
    },
    methods: {
      initLoading () {
        this.loading = {
          status: true,
          text: '数据加载中...'
        }
      },
      showLoading (status, text = '') {
        this.loading = {
          status: status,
          text: text
        }
      },
      currentChange (current) {
        this.current = current
        this.load()
        this.getCount()
      },
      pageSizeChange (pageSize) {
        this.pageSize = pageSize
        this.load()
        this.getCount()
      },
      getCount () {
        role.getCount().then(r => {
          if (r.code === 200) {
            this.total = r.count
          } else {
            this.$Message.warning(r.msg)
          }
          this.showLoading(false)
        })
      },
      load () {
        role.gets(this.current, this.pageSize).then(r => {
          if (r.code === 200) {
            this.list = r.list
          } else {
            this.$Message.warning(r.msg)
          }
          this.showLoading(false)
        }).catch(err => {
          this.$Message.error(err.message)
        })
      },
      add () {
        this.$modal.container(() => import('./add.vue'), (r) => {
          if (r.refresh) {
            this.refresh()
          }
        }, (r) => {
          if (r.refresh) {
            this.refresh()
          }
        }, {})
      },
      edit (id) {
        this.$modal.container(() => import('./edit.vue'), (r) => {
          if (r.refresh) {
            this.refresh()
          }
        }, (r) => {
          if (r.refresh) {
            this.refresh()
          }
        }, {
          id: id
        })
      },
      refresh () {
        this.list = []
        this.load()
      }
    }
  }
</script>

<style scoped>

</style>